<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Baidu Map </title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style> 
     <script type="text/javascript"
     src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=VHYqgkmedOCoMq0MymDs8b7Z23kNxcQB"></script> 
</head>  
<body>

<div id="container">

</div>
</body>  
<script>

var map = new BMapGL.Map("container");          // 创建地图实例 
var point =new BMapGL.Point(117.162349, 36.987651);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度


var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

//var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注  
  

 
 
map.centerAndZoom(point, 15);
 
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画




map.addOverlay(marker);    
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var content = "金麒麟欢迎您";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中


marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});


 
</script>

</html>

 